<html>
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="container-fluid">
        <div style="margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 20px;width:500px;height:320px;">
            <form class="form-horizontal" role="form" id="register-form" @submit.prevent="login">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名" v-model.trim="username" value="{{username}}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password1" class="col-sm-2 control-label">密码</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="password1" placeholder="请输入密码" v-model.trim="password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password2" class="col-sm-2 control-label">新密码</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="password2" placeholder="请输入新密码" v-model.trim="new_password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">登录</button>
                        <a href="/user/forget_pwd" class="btn">忘记密码？</a>&nbsp;
                        <a href="/user/register" class="btn">注册</a>
                    </div>
                </div>
                {% if msg %}
                <div class="alert alert-danger">{{msg}}</div>
                {% endif %}
            </form>
        </div>
    </div>

    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#register-form',
            data: {
                username:'',
                password:'',
                new_password:''
            },
            methods: {
                login: function (event) {
                    if (this.username == '') {
                        alert('请输入用户名');
                        return false;
                    }

                    if (this.password == '') {
                        alert('请输入密码');
                        return false;
                    }
                    if (this.password2 == '') {
                        alert('请输入新密码');
                        return false;
                    }

                    $.post('/user/change_pwd',this.$data,function(r) {
                        r = $.parseJSON(r);
                        if (r.msg) {
                            alert(r.msg);
                        }
                        else {
                            location.assign('/');
                        }
                    });
                }
            }
        })
    </script>
</div>
</body>
</html>